<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="swiper-bundle.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/axios.min.js"></script>
</head>

<body>
    <script src="swiper-bundle.min.js"></script>
    <div id="big-box">
        <div class="header">
            <div id="data-box">
                <div class="data-left">
                    <a>全部产品</a>
                    <a>专柜查询</a>
                </div>
                <div class="data-center">
                </div>
                <div class="data-right">
                    <ul>
                        <li class="help-center">帮助中心
                            <div class="help">
                                <div class="help-left">
                                    <h3>如何获得我们的帮助?</h3>
                                    <p>
                                        <a href="">常见问题</a>
                                    </p>
                                    <p>
                                        <a href="">使用条款</a>
                                    </p>
                                    <p>
                                        <a href="">隐私声明</a>
                                    </p>
                                    <p>
                                        <a href="">cookies政策</a>
                                    </p>
                                    <p>
                                        <a href="">知识产权和版权</a>
                                    </p>
                                    <p>
                                        <a href=""> 网站地图</a>
                                    </p>
                                </div>
                                <div class="help-right">
                                    <h3>联系我们</h3>
                                    <p>
                                        <a href="">在线客服：周一-周日早上9点-晚上24</a>
                                    </p>
                                    <p>
                                        <a href="">电话客服：周一-周五早上9点-下午18点 致电400-820-6499</a>
                                    </p>
                                    <a href="">
                                        <div class="help-button">在线咨询</div>
                                    </a>
                                </div>

                                0
                            </div>
                        </li>
                        <li>订阅电子杂志</li>
                        <li class="login"><a href="login.html">登录与注册
                    </a> </li>
                        <li class="data-right-buy"><a href="gouwuche.html">购物袋(0)</a></li>

                </div>
                </ul>
            </div>

            <!-- menu-bar -->
            <div class="menu-bar-box ">
                <div class="menu-bar ">
                    <div class="menu-bar-left "><img src="img/logo.03fce175.jpg " alt=" ">
                    </div>
                    <!-- center -->
                    <!-- 导航 -->
                    <div class="menu-bar-center ">
                        <ul class="menu-bar-center-ul">
                            <li class="menu-bar-center-li">明星产品 </li>
                            <li>会员尊享</li>
                            <li>彩妆</li>
                            <li>护肤</li>
                            <li>工具</li>
                            <li>品牌故事</li>
                        </ul>
                    </div>
                    <div class="menu-bar-right"><span>柔雾唇膏</span></div>
                </div>
            </div>

            <!-- menu-bar-bottom-img-box -->
            <div class="menu-bar-bottom-img-box ">
                <div class="menu-bar-bottom-img " style="background: url(img/0701-PC.jpg) center no-repeat; background-size:cover; "></div>
            </div>
        </div>
    </div>
    </div>

    <!-- swiper 轮播 -->
    <div class="swiper-container ">
        <div class="swiper-wrapper ">
            <div class="swiper-slide "><img src="img/lunbo01.jpg " alt=" "></div>
            <div class="swiper-slide "><img src="img/lunbo02.jpg " alt=" "></div>
            <div class="swiper-slide "><img src="img/lunbo03.jpg " alt=" "></div>
            <div class="swiper-slide "><img src="img/lunbo04.jpg " alt=" "></div>
            <div class="swiper-slide "><img src="img/lunbo05.jpg " alt=" "></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination lunbo1 "></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev "></div>
        <div class="swiper-button-next "></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar "></div> -->
    </div>

    <!--event products活动产品  -->
    <div class="event-products-box">
        <div class="event-products ">
            <!-- 1 -->
            <div class="event-products-all "><img src="img/event-products01.jpg " alt=" ">
                <h2>会员满额加赠123</h2>
                <h3>享新品好礼</h3>
                <h4><span>发现更多</span></h4>
            </div>
            <!-- 2 -->
            <div class="event-products-all "><img src="img/event-products02.jpg " alt=" ">
                <h2>5大匠心单品</h2>
                <h3>畅销单品 匠心打造</h3>
                <h4><span>发现更多</span></h4>
            </div>
            <!-- 3 -->
            <div class="event-products-all "><img src="img/event-products03.jpg " alt=" ">
                <h2>洁颜家族</h2>
                <h3>以油洁颜 以油养肤</h3>
                <h4><span>发现更多</span></h4>
            </div>
            <!-- 4 -->
            <div class="event-products-all "><img src="img/event-products04.jpg " alt=" ">
                <h2>付邮试用</h2>
                <h3>星品尝鲜 付邮试用</h3>
                <h4><span>发现更多</span></h4>
            </div>
        </div>
    </div>
    <!-- Star products植村秀明星产品 -->
    <div class="Star-products-box " style="flex-direction: row; ">

        <!-- Star-products-box-left植村秀明星产品 -->
        <div class="Star-products-box-left ">
            <!-- title -->
            <div class="Star-products-box-title ">
                <div class="Star-products-box-img "><img src="img/Star products-logo.png " alt=" "> <a href=" ">植村秀明星产品></a>
                </div>

            </div>
            <!-- 轮播 -->
            <div class="swiper-container ">
                <div class="swiper-wrapper swiper-container-lunbo2 ">
                    <div class="swiper-slide">
                        <!-- 商品 -->
                        <div class="shangpin">
                            <!-- <div class="shangpin01"> 
                            <img src="img/productlist-frist-left01.jfif" alt="">
                                <h3>商品</h3>
                                <h4>商品详情</h4>
                                <p>价格</p>
                                <a><button class="buybtn">立即购买</button></a> -->
                            <!-- </div> -->
                        </div>
                        <!--  -->
                    </div>
                    <div class="swiper-slide">
                        <div class="shangpin-er">
                            <!-- <div class="shangpin01">
                                <img src="" alt="">
                                <h3>商品</h3>
                                <h4>商品详情</h4>
                                <p>价格</p>
                                <a href="desc.html?pid=${pObj.pid}"><button class="buybtn">立即购买</button></a> 
                            </div> -->
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination lunbo2 "></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev "></div>
                <div class="swiper-button-next "></div>

                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar "></div>
            </div>
        </div>


        <!-- Star-products-box-right植村秀明星产品 -->
        <div class="Star-products-box-right " style="background: url(img/Star-products-box-right.jpg) center no-repeat; background-size:cover; ">
            <a href=" "></a>
        </div>
    </div>
    <!-- 养肤洁颜蜜 -->
    <div class="imgs-warp " style="background: url(img/Star-products-box-bottom.jpg)center no-repeat; background-size:cover; ">
        <a href=" "></a>
    </div>
    <!-- 新品上市 -->
    <div class="product-new-match ">
        <div class="product-new-match-title ">
            <h3 class="product-new-match-title-frist ">新品上市</h3>
            <h3 class="product-new-match-title-second "><a href=" ">查看所有新品</a></h3>
        </div>
        <!-- 轮播 -->
        <div class="swiper-container swiper-container-lunbo3">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="new-match">
                        <div class="new-match01">
                            <!-- <div class="new-match01-left">
                                <img src="img/productlist-frist-left01.jfif" alt="">
                                <button class="look">立即浏览</button>
                            </div>
                            <div class="new-match01-right">
                                <h3 class="hh3">名字</h3>
                                <h4 class="hh4">详情</h4>
                                <h5 class="hh5">价格</h5>
                                <button class="buybtn">立即购买</button>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="new-match">
                        <div class="new-match02">
                            <!-- <div class="new-match01-left">
                                <img src="img/productlist-frist-left01.jfif" alt="">
                                <button class="look">立即浏览</button>
                            </div>
                            <div class="new-match01-right">
                                <h3 class="hh3">名字</h3>
                                <h4 class="hh4">详情</h4>
                                <h5 class="hh5">价格</h5>
                                <button class="buybtn">立即购买</button>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>


            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>

        <!--  -->
    </div>
    <!-- 选项卡 -->
    <div class="tab" style="background: url(img/tab.jpeg) center no-repeat;">
        <ul class="tab-ul ">
            <li class="active">1.洁颜家族 以油洁颜 一步卸净 柔嫩如初</li>
            <li>2.经典砍刀眉笔 硬质砍刀 三刀仿真眉</li>
            <li>3. 当红唇妆 明星同款 784 野红栗</li>
        </ul>
        <ol class="tab-ol">
            <li class="active">
                <div class="clean">
                    <div class="clean-face-le">
                        <img src="img/clean01.jpg" alt="">
                    </div>
                    <div class="clean-face-rl">
                        <!-- <div class="clean-right"> -->
                        <!-- <div class="clear-img">
                                <img src="img/tab-01.jpg" alt="">
                            </div>
                            <div class="clear-text">
                                <h3>
                                    <a href="">琥珀洁颜养肤油</a>
                                </h3>
                                <p class="jiage">价格</p>
                                <button class="anniu">立即加购</button>
                            </div>-->
                        <!-- </div> -->
                    </div>
                </div>
            </li>
            <li>
                <div class="clean">
                    <div class="clean-face-le">
                        <img src="img/clean02.jpg" alt="">
                    </div>
                    <div class="clean-face-rl2">
                        <!-- <div class="clean-right"> -->
                        <!-- <div class="clear-img">
                                <img src="img/tab-01.jpg" alt="">
                            </div>
                            <div class="clear-text">
                                <h3>
                                    <a href="">琥珀洁颜养肤油</a>
                                </h3>
                                <p class="jiage">价格</p>
                                <button class="anniu">立即加购</button>
                            </div>-->
                        <!-- </div> -->
                    </div>
                </div>
            </li>
            <li>
                <div class="clean">
                    <div class="clean-face-le">
                        <img src="img/clean03.jpg" alt="">
                    </div>
                    <div class="clean-face-rl3">
                        <!-- <div class="clean-right"> -->
                        <!-- <div class="clear-img">
                                <img src="img/tab-01.jpg" alt="">
                            </div>
                            <div class="clear-text">
                                <h3>
                                    <a href="">琥珀洁颜养肤油</a>
                                </h3>
                                <p class="jiage">价格</p>
                                <button class="anniu">立即加购</button>
                            </div>-->
                        <!-- </div> -->
                    </div>
                </div>
            </li>
        </ol>
    </div>
    <!-- 会员 -->
    <div class="vip ">
        <!-- vip图片 -->
        <div class="vip-left" style="background: url(img/join.img) center no-repeat;">
            <!-- <img src="img/join.img " alt=" "> -->
        </div>
        <!-- vip右侧会员特权 -->
        <div class="vip-right " style="background:url(img/vip02.jpg) center;">
            <div class="vip-right-cont ">
                <h3>报名订阅植村秀电子邮件享受会员特权</h3>
                <p> 请输入您的邮箱地址*</p>
            </div>
            <div class="vip-right-input ">
                <!-- 按钮 -->
                <div class="inputs "> <input type="text " class="input ">
                    <!-- 按钮 -->
                    <input type="button " class="button " value="订阅 "></div>
                <input type="checkbox" class="checkbox ">我同意依照本使用条款和隐私政策对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容。
            </div>
        </div>

    </div>
    <div class="footer ">
        <!-- 官方正品保证 -->
        <div class="footer-row ">
            <div class="footer-row1 ">
                <img src="img/footer-row1.png " alt=" ">
                <p>100%官方正品保证</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row2.png " alt=" ">
                <p>支持多种支付方式</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row3.png " alt=" ">
                <p>专享官网特惠礼遇</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row4.png " alt=" ">
                <p>联系我们</p>
                <p>电话400-820-6499</p>
            </div>
        </div>
    </div>
    <div class="copyright ">
        <div class="copyright-top ">
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">护肤</a>
                </h3>
                <p>
                    <a href="product.html ">洁颜油</a>
                </p>
                <p>
                    <a href="product.html">面部喷雾</a>
                </p>
            </div>
            <!-- 2 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html ">眼部</a>
                </h3>
                <p>
                    <a href="product.html"> 眉妆</a>
                </p>
                <p>
                    <a href="product.html">眼影</a>
                </p>
                <p>
                    <a href="product.html"> 眼线</a>
                </p>
            </div>
            <!-- 3 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">唇部</a>
                </h3>
                <p>
                    <a href="product.html"> 唇膏</a>
                </p>
                <p>
                    <a href="product.html"> 唇釉</a>
                </p>
            </div>
            <!-- 4 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">脸部
                       </a>
                </h3>
                <p>
                    <a href="product.html"> 粉底系列</a>
                </p>
                <p>
                    <a href="product.html">遮瑕系列</a>
                </p>
                <p>
                    <a href="product.html">隔离系列</a>
                </p>

            </div>
            <!-- 5 -->

            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">工具</a>
                </h3>
                <p>
                    <a href="product.html">粉底刷</a>
                </p>
                <p>
                    <a href="product.html">刷具套组</a>
                </p>
                <p>
                    <a href="product.html">睫毛夹</a>
                </p>
            </div>
            <!-- 6 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">护肤</a>
                </h3>
                <p>
                    <a href="product.html">洁颜油</a>
                </p>
                <p>
                    <a href="product.html">面部喷雾</a>
                </p>
            </div>

        </div>
        <div class="copyright-bottom ">
            <p>关注我们 国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。
            </p>
            <p>使用条款 | Cookies政策 | 隐私政策</p>
            <p>使用条款 | Cookies政策 | 隐私政策 中国工商沪ICP备08100043-7号沪公网安备 31010602001532号©L'Oreal China 欧莱雅（中国）有限公司版权所有</p>
        </div>
    </div>


    <!-- 最外层的div结束 -->
    </div>
    <script src="js/luobo.js "></script>
    <script src="js/tab.js"></script>

    <script>
        //轮播
        shangpin();

        function shangpin() {
            let pagesize = 4;
            let pagenum = 0;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                        <div class="shangpin01">
                        <img src="${pobj.pimg}" alt="">
                        <h3>${pobj.pname}</h3>
                        <h4>${pobj.pdesc}</h4>
                        <p>${pobj.pprice}</p>
                        <a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>

</div>`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".shangpin")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        shangpin02();

        function shangpin02() {
            let pagesize = 4;
            let pagenum = 1;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                        <div class="shangpin01">
                        <img src="${pobj.pimg}" alt="">
                        <h3>${pobj.pname}</h3>
                        <h4>${pobj.pdesc}</h4>
                        <p>${pobj.pprice}</p>
                        <a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>

</div>`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".shangpin-er")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        shangpin03();

        function shangpin03() {
            let pagesize = 3;
            let pagenum = 1;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                <div class="new-match01-left">
                                <img src="${pobj.pimg}" alt="">
                                <button class="look">立即浏览</button>
                            </div>
                            <div class="new-match01-right">
                                <h3 class="hh3">${pobj.pname}</h3>
                                <h4 class="hh4">${pobj.pdesc}</h4>
                                <a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>

                            </div>`)
                console.log(resArr);
                let shangpin = document.querySelector(".new-match01")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }

        shangpin04();

        function shangpin04() {
            let pagesize = 3;
            let pagenum = 0;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
        <div class="new-match01-left">
                        <img src="${pobj.pimg}" alt="">
                        <button class="look">立即浏览</button>
                    </div>
                    <div class="new-match01-right">
                        <h3 class="hh3">${pobj.pname}</h3>
                        <h4 class="hh4">${pobj.pdesc}</h4>
                        <a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>

                    </div>`)
                console.log(resArr);
                let shangpin = document.querySelector(".new-match02")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }


        //选项卡
        tab();

        function tab() {
            let pagesize = 3;
            let pagenum = 0;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                <div class="clean-right">
                            <div class="clear-img">
                                <img src="${pobj.pimg}" alt="">
                            </div>
                            <div class="clear-text">
                                <h3>
                                    <a href="">${pobj.pname}</a>
                                </h3>
                                <p class="jiage">￥${pobj.pprice}</p>
                                <a href="desc.html?pid=${pobj.pid}"> <button class="anniu">立即购买</button></a>

                            </div>
                            </div>
                      `)
                console.log(resArr);
                let shangpin = document.querySelector(".clean-face-rl")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        tab2();

        function tab2() {
            let pagesize = 3;
            let pagenum = 1;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                <div class="clean-right">
                            <div class="clear-img">
                                <img src="${pobj.pimg}" alt="">
                            </div>
                            <div class="clear-text">
                                <h3>
                                    <a href="">${pobj.pname}</a>
                                </h3>
                                <p class="jiage">￥${pobj.pprice}</p>
                                <a href="desc.html?pid=${pobj.pid}"> <button class="anniu">立即购买</button></a>

                            </div>
                            </div>
                      `)
                console.log(resArr);
                let shangpin = document.querySelector(".clean-face-rl2")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        tab3();

        function tab3() {
            let pagesize = 3;
            let pagenum = 2;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                <div class="clean-right">
                            <div class="clear-img">
                                <img src="${pobj.pimg}" alt="">
                            </div>
                            <div class="clear-text">
                                <h3>
                                    <a href="">${pobj.pname}</a>
                                </h3>
                                <p class="jiage">￥${pobj.pprice}</p>
                                <a href="desc.html?pid=${pobj.pid}"> <button class="anniu">立即购买</button></a>

                            </div>
                            </div>
                      `)
                console.log(resArr);
                let shangpin = document.querySelector(".clean-face-rl3")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        // 2
    </script>



</body>

</html>